<template>
  <el-card class="box-card">
    <div class="sy">首页</div>
    <div class="sign">
      <el-button class="btnn"  @click="signin = true">签到</el-button>
    </div>
  </el-card>
  <el-row
      :gutter="20"
      type="flex"
      class="row-bg1"
      justify="center"
      style="margin-bottom: 80px"
  >
    <el-col :span="10">
      <div class="b">
        <p class="p">倒计时</p>
        <Bing/>
      </div>
    </el-col>
    <el-col :span="10">
      <div class="z">
        <p class="p">打卡记录</p>
        <Zhu/>
      </div>
    </el-col>
  </el-row>


  <el-row
      :gutter="20"
      type="flex"
      class="row-bg"
      justify="center"
      style="margin-bottom: 80px"
  >
    <el-col :span="10">
      <div class="show-header">
        <div class="show-num">{{ tot.t }}</div>
        <div >今日待办</div>
      </div>
    </el-col>
    <el-col :span="10">
      <div class="show-header" style="background: rgb(255, 153, 0)">
        <div class="show-num">{{y.y}}</div>
        <div class="bottom-text">专注进度</div>
      </div>
    </el-col>
  </el-row>

  <el-dialog v-model="signin" title="每日签到" width="30%" center>
    <span>
        签到成功<br>
      您已经连续签到了21天
    </span>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="signin = false">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import {onMounted, ref} from "vue";
import Bing from "@/components/Bing.vue"
import Zhu from "@/components/Zhu.vue"
import axios from "@/utils/axios";
const signin = ref(false)
const tot = ref({
  t:""
    }
)
const y = ref({
  y:""
})
onMounted(() => {


  axios
      .get("/query")
      .then((res: any) => {
        tot.value.t = res.length
      })
      .catch((err: any) => {});
});
axios
    .get("/focusquery")
    .then((res: any) => {
    y.value.y = res.length
    })
    .catch((err: any) => {});

</script>

<style scoped>
.show-header {
  background: #00c0ef;
  color: #fff;
  height: 80px;
  border-radius: 5px;
  position: relative;
}
.show-num {
  font-size: 38px;
  font-weight: 600;
  padding: 5px;
}
.sy {
  float: left;
  width: 6%;
  font-size: 20px;
  font-weight:bold;
  display: inline-block
}
.sign{
  display: inline-block;
  float: right;
}
.box-card {
  width: 95%;
  margin:-5px 0 0 30px;
  height: 70px;
}
.row-bg1{
  height: 400px;
}
.p{
  color: transparent;
  -webkit-text-stroke: 1px #79bbff;
  letter-spacing: 0.04em;
  font-size: 30px;
}
.btnn {
  background-color: #fff;
  z-index: 1;
  position: relative;
  overflow: hidden;
  color: red;
  border: 3px solid red;
  padding: 10px 20px;
  font-family: Arial;
  font-weight: 800;
  font-size: 1.05em;
  border-radius: 15px;
  transition: transform .3s ease, color .5s ease;
}

.btnn::before {
  content: '';
  inset: 0 0 0 0;
  margin: auto;
  height: 0px;
  width: 0px;
  position: absolute;
  background-color: red;
  z-index: -1;
  border-radius: 50%;
  transition: all .7s ease;
}

.btnn:active {
  transform: scale(.9);
}

.btnn:hover {
  color: #fff;
}

.btnn:hover:before {
  height: 200px;
  width: 200px;
}
.z{
}
</style>
